<script setup>
import NameIcon from '../../NameIcon.vue'

let props = defineProps({
  control: Object,
  formProps: Object,
  enData: Object,
})

function requiredChange(value) {
  props.control.rules[0].required = value;
}

function requiredMessageChange(value) {
  props.control.rules[0].message = value;
}

function patternChange(value) {
  if (value) {
    props.control.rules[1].pattern = eval(value);
  }
}

function patternMessageChange(value) {
  props.control.rules[1].message = value;
}

// 多选固定选项删除
const delSelectOption = (index, type) => {
  props.control.props.columns.splice(index, 1)
}
// 多选固定选项增加
const addSelectOption = (type) => {
  props.control.props.columns.push({
    label: '标签名称',
    controls: []
  })
}
</script>

<template>
  <el-form label-width="90px">
    <el-form-item label="宽度">
      <el-slider
          class="w-11/12"
          :min="0"
          :max="formProps.cols"
          show-stops
          v-model="control.props.width"
      ></el-slider>
    </el-form-item>
    <el-form-item label="标签页">
      <div v-for="(item, index) in props.control.props.columns" :key="item.label">
        <el-col :span="12">
          <el-input placeholder="标签配置项" v-model="item.label"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
          <el-icon>
            <NameIcon name="delete" @click="delSelectOption(index, 'tabs')"/>
          </el-icon>
        </el-col>
      </div>
    </el-form-item>
    <el-form-item label="描述信息">
      <el-input type="textarea" rows="5" v-model="control.props.remark" placeholder="请输入描述信息"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="addSelectOption('tabs')">增加标签</el-button>
    </el-form-item>
  </el-form>
</template>
